<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*section>div{
        color: #433b90;
        }*/

        /*
        section > div + article {
            color: red;
        }*/

        /*section>div ~ article{
            color: red;
        }*/

        span,a,p,b{
            color: red;
        }
    </style>
</head>
<body>
<!--
1. 子元素选择器
    只能选择某元素的子元素
    语法格式
        父元素>子元素
2. 相邻兄弟选择器
    选择元素后面挨着的同级的元素，有一个相同的父元素
    元素+兄弟相邻元素
3. 通用兄弟选择器
    选择某元素后面的所有兄弟元素，有一个相同的父元素
    元素~后面所有兄弟相邻元素
4. 群组选择器
    将相同样式的元素分组放在一起，每个选择器之间适用逗号(,)隔开
    元素1,元素2,...,元素n{...}
-->
</body>

<section>
    <article>
        <div>article 里面的文字1</div>
    </article>
    <div>article 外面的文字</div>
    <article>
        <div>article 里面的文字2</div>
    </article>
    <article>
        <div>article 里面的文字3</div>
    </article>
    <article>
        <span>article 里面的文字3 span</span>
        <p>article 里面的文字3 p</p>
        <b>article 里面的文字3 b</b>
    </article>
</section>
</html>